<template>
<div class="personnel-management-add views-container">
    <div class="wlm-form">
        <div class="wlm-form-header">添加员工</div>
        <div class="wlm-form-content">
            <el-form :ref="formFormatData.key" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="120px" class="retail-form" label-position="right">
                <el-form-item label="员工账号" prop="username">
                    <el-input v-model.trim="formFormatData.formData.user_name">
                    </el-input>
                </el-form-item>
                <el-form-item label="员工姓名" prop="username">
                    <el-input v-model.trim="formFormatData.formData.real_name">
                    </el-input>
                </el-form-item>
                <el-form-item label="登陆密码" prop="username">
                    <el-input v-model.trim="formFormatData.formData.password">
                    </el-input>
                </el-form-item>
                <el-form-item label="所属角色" prop="nickname">
                    <el-select v-model="formFormatData.formData.store_role_id" placeholder="请选择">
                      <el-option v-for="item in roledata" :key="item.store_role_id" :label="item.name" :value="item.store_role_id">
                      </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="员工类型" prop="nickname">
                    <el-radio-group v-model="formFormatData.formData.is_super">
                        <el-radio :label="0">普通员工</el-radio>
                        <el-radio :label="1">超级管理员</el-radio>
                    </el-radio-group>
                    <p class="form-help">超级管理员添加后不可编辑</p>
                </el-form-item>
                <el-form-item label="状态">
                    <el-radio-group v-model="formFormatData.formData.is_use">
                        <el-radio :label="1">启用</el-radio>
                        <el-radio :label="0">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <div v-cloak class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
        <el-button size="small" @click="saveform">保存</el-button>
        <router-link tag="span" to="/setting/personnelManagement">
            <el-button size="small">返回</el-button>
        </router-link>
    </div>
</div>
</template>

<script>
// import { userAdd } from '@/api/user'
import {
  addStoreUserInfo,
  updateStoreUserInfo,
  addStoreUserGetRoleList,
  getStoreUserInfo
} from '@/api/setting'
// import {
//   regPhone
// } from '@/utils/regular'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Form')],
  name: 'ManagementUserAdd',
  components: {

  },
  computed: {

  },
  created() {
    addStoreUserGetRoleList().then((response) => {
      const {
        data: {
          data: mesdata = []
        }
      } = response
      this.roledata = mesdata
    })
  },
  data() {
    // var mobile = (rule, value, callback) => {
    //   if (!regPhone(value)) {
    //     return callback(new Error('注册手机号格式不正确'))
    //   } else {
    //     callback()
    //   }
    // }
    return {
      roledata: [],
      formFormatData: {
        key: 'userForm',
        api: {
          editForm: {
            api: getStoreUserInfo,
            params: {
              id: ''
            },
            redirect: 'store_user_id'
          },
          submitForm: this.$route.query.store_user_id ? updateStoreUserInfo : addStoreUserInfo
        },
        formData: {
          user_name: '',
          password: '',
          real_name: '',
          is_super: 0,
          is_use: 1,
          store_role_id: '',
          store_user_id: ''
        },
        rules: {
          // nickname: [{
          //   required: true,
          //   message: '请输入真实姓名',
          //   trigger: 'blur'
          // }],
          // username: [{
          //   required: true,
          //   message: '请输入用户手机号',
          //   trigger: 'blur'
          // },
          // {
          //   validator: mobile,
          //   trigger: 'blur'
          // }
          // ]
        }
      }
    }
  },
  methods: {
    saveform() {
      if (this.formFormatData.formData.is_super === 1) {
        this.$confirm('超级管理员添加后不可编辑,确认添加吗？', '注意', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.formFormatSubmit({ router: { type: 'replace', path: '/setting/personnelManagement', code: 1 }})
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      } else {
        this.formFormatSubmit({ router: { type: 'replace', path: '/setting/personnelManagement', code: 1 }})
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.personnel-management-add {}
</style>
